import React ,{useState,useRef}from "react";
import { PageContainer } from "@ant-design/pro-layout";
import ProTable from "@ant-design/pro-table";
import { Button,message,Modal } from "antd";
import CreateBizType from "./component/CreateBizType";
import UpdateBizType from "./component/UpdateBizType";
import { querySaleChannel,addSaleChannel,updateSaleChannel,removeSaleChannel } from "@/services/ant-design-pro/apis";

const BizType = (props) => {
     
    const actionRef = useRef();
    const [selRows,setSelRows]=useState();
    const [createModalVisible,handleModalVisible]=useState(false);
    const [updateModalVisible,handleUpdteModalVisible]=useState(false);
    const [stepFormVals,setStepFormVals]= useState();


    const handleDel = async (record) => {
        Modal.confirm({
            title: '删除售卖渠道',
            content: '确认删除售卖渠道？',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
                const hide = message.loading('正在删除');
               try{
                await removeSaleChannel({ id: record.id })
                hide();
                message.success('删除成功');
                actionRef.current.reload();
               }catch(error){
                hide();
                message.error('删除失败请重试！');
                return false;
               }
            }
        })
    }

    const handleAdd = async (value) =>{
        const hide = message.loading("正在添加");
        try{
            await addSaleChannel({...value})
            hide();
            handleModalVisible(false);
            message.success("添加成功");
            actionRef.current.reload();
            return true;
        }catch(error){
            hide();
            message.error("添加失败")
            return false;
        }
    }

    const handleUpdate = async (value) =>{
        const hide = message.loading("正在配置");
        try{
            await updateSaleChannel({...value})
            hide();
            handleUpdteModalVisible(false);
            setStepFormVals(undefined);
            message.success("配置成功");
            actionRef.current.reload();
        }catch(error){
            hide();
            message.error("配置失败")
        }
    }

    const columns=[
        {
            title:'售卖渠道代码',
            dataIndex:'channelCode',
            formItemProps:{
                rules:[
                    {
                        required:true,
                        message:"业务代码是必须项"
                    }
                ]
            }
        },
        {
            title:'售卖渠道名称',
            dataIndex:'name',
            formItemProps:{
                rules:[
                    {
                        required:true,
                        message:"售卖渠道是必须项"
                    }
                ]
            }
        },
        {
            title:'类型',
            dataIndex:'channelType',
            valueEnum:{
                1: {
                    text: '支持',
                    status: 'Success'
                },
                2: {
                    text: '不支持',
                    status: 'Error'
                }
            },
            formItemProps:{
                initialValue:undefined,
                rules:[
                    {
                        required:true,
                        message:"状态是必须项"
                    }
                ]
            },
            hideInSearch:true
        },
        {
            title:'操作',
            dataIndex:'option',
            valueType:'option',
            render:(_,record)=>[
                <a key="edit" onClick={()=>{
                    setStepFormVals(record);
                    handleUpdteModalVisible(true);
                }}>配置</a>,
                <a key="delete" onClick={()=>{
                    handleDel(record);
                }}>删除</a>
            ]
        }
    ]

    return (
        <PageContainer>
            <ProTable
               columns={columns}
               actionRef={actionRef}
               headerTitle='售卖渠道列表'
               rowKey='id'
               request={querySaleChannel}
               rowSelection={{
                   onChange:(_,selRows)=>{
                       setSelRows(selRows)
                   }
               }}
               toolBarRender={()=>[
                   <Button type="primary" onClick={()=>{
                       handleModalVisible(true)
                   }}>新建</Button>
               ]}
            >              
            </ProTable>

            <CreateBizType
              createModalVisible={createModalVisible}
              handleModalVisible={()=>{handleModalVisible(false)}}

            >
                <ProTable
                  type="form"
                  columns={columns}
                  onSubmit={async (values)=>{
                       await handleAdd(values)
                  }}
                >
                </ProTable>
            </CreateBizType>

            {stepFormVals && Object.keys(stepFormVals).length?(
                <UpdateBizType
                  updateModalVisible={updateModalVisible}
                  onCanel={()=>{
                      handleUpdteModalVisible(false)
                      setStepFormVals(undefined);
                  }}
                  onSubmit={(values)=>{
                    handleUpdate(values)
                  }}
                  values={stepFormVals}
                >

                </UpdateBizType>
            ):null}
        </PageContainer>
    )
}

export default  BizType;

